<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript &amp; jQuery opdrachten</title>
<link href="_css/site.css" rel="stylesheet">
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
var snelheid=0, vervoer='', weg='';

function getWaardes() {
	
	snelheid = $('#snelheid').val();
	weg  = $('input[name=weg]:checked').val();
	vervoer = $('input[name=vervoer]:checked').val();
	
}

function wijzigSnelheid() {
	
	getWaardes();
	
	if (vervoer == '' || weg == '' || snelheid == 0 || isNaN(snelheid) ) {
		alert('Je hebt niet alle velden ingevuld');
		return;
	}
	alert(weg);
	alert(vervoer);
    
	
	if ( vervoer=='voet' && weg != 'stoep') {
		alert ('Als je voet bent mag je alleen op de stoep');
    }	
	
	if ( vervoer=='voet' && snelheid > 6) {
		alert ('Als je te voet kun je niet sneller dan 6 km/u');
    }	
	
	
	meldStatus('Snelheid ' + snelheid); 
}

function meldStatus(tekst) {
    $('#status').html(tekst);
}


</script>
</head>
<body>
<div class="wrapper">
  <div class="header">
    <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">KW1C<br>ICT-academie</i></p>
  </div>
  <div class="content">
    <div class="main">
      <h1>Javascript opdracht 4a</h1>
      <script>
		
	  </script> 
	  <form id="order">
		<fieldset>
			<legend>Data:</legend>
			<div>
			<label>Vervoer: </label><input name="vervoer" type="radio" value="voet">te voet<input name="vervoer" type="radio" value="fiets">te fiets<input name="vervoer" type="radio" value="auto">met de auto
			</div>
			<div>
			<label>Plek:</label>
			<input name="weg" type="radio" value="stoep">stoep
			<input name="weg" type="radio" value="straat">straat in de stad
			<input name="weg" type="radio" value="autoweg">autoweg
			<input name="weg" type="radio" value="snelweg">snelweg			
			</div>
			<label>Snelheid:</label>
			<input id="snelheid" name="snelheid" size="3" type="text" value="0" maxlength="3">&nbsp;km/h
		</fieldset>
		<input type="button" name="Verander" value="Wijzig" onclick="javascript:wijzigSnelheid()">
	  </form>
	  <p id="status">
	  </p>
    </div>
  </div>
  <div class="footer">
    <p>JavaScript &amp; jQuery, W. van Bijnen en A. Saebu, BOL 4 - opleiding tot Applicatie ontwikkelaar (2013).</p>
  </div>
</div>
</body>
</html>
